<template>
	<view class="select_wrap" :style="{ width: size + 'rpx' }">
		<view :class="['select_input', isClick ? 'select_input_select' : '']" ref="select-input">
			<view class="input_info" @click.stop="openSelect" v-if="!readonly">
				<input placeholder-style="font-size: 14px;color: #a0a9b0;" :focus="isClick" @input="selectData"
					:value="selLabel" type="text" :readonly="readonly" :disabled="readonly" autocomplete="off"
					:placeholder="placeholder" class="text_tips" @blur="toBlur" />
			</view>
			<view class="input_info" @click.stop="openSelect" v-else>
				<view :placeholder="placeholder" class="text_tips">{{ selLabel }} <text
						v-if="!selLabel">{{ placeholder }}</text>
				</view>
			</view>
			<view class="mini_box" v-if="
			(!value && !clearable) ||
			(value && !clearable) ||
			(!value && clearable && filterable)
		  " @click.stop="toXl">
				<view class="icon_arrow">
					<view :class="['arrow', show ? 'arrow_down' : 'arrow_up']"> </view>
				</view>
			</view>
			<view class="mini_box" v-if="value && clearable" @click.stop="toXl">
				<view class="icon_arrow">
					<view class="arrow-clear" @click.stop="clearItem">
						<uniIcons type="clear" color="#dcdfe6" size="20"></uniIcons>
					</view>
				</view>
			</view>
		</view>
		<view class="select_modal_con" v-if="show" @touchmove.stop.prevent="() => {}">
			<scroll-view scroll-y="true" class="select_modal select_modal_scroll">
				<view class="select_content" ref="select_content">
					<view v-for="(item, index) in showData" :key="index" class="select_content_li"
						:class="{ selected: value == item[valueType.value] }" @click="change(item)">
						{{ item[valueType.label] }}
					</view>
					<view class="select_content_li" v-if="!showData.length">{{
			  noDataText
			}}</view>
				</view>
			</scroll-view>
			<!-- #ifndef H5 -->
			<!-- <scroll-view scroll-y="true" class="select_modal select_modal_scroll">
				  <view class="select_content" ref="select_content">
					  <view v-for="(item, index) in showData" :key="index" class="select_content_li" :class="{'selected': value == item[valueType.value]}" @click="change(item)">{{item[valueType.label]}}</view>
					  <view class="select_content_li" v-if="!showData.length">{{noDataText}}</view>
					  
				  </view>
			  </scroll-view> -->
			<!--  #endif -->
			<!-- #ifdef H5  -->
			<!-- <view class="select_modal">
					  <view class="select_content" ref="select_content">
						  <view v-for="(item, index) in showData" :key="index" class="select_content_li" :class="{'selected': value == item[valueType.value]}" @click="change(item)">{{item[valueType.label]}}</view>
						  <view class="select_content_li" v-if="!showData.length">{{noDataText}}</view>
					  </view>
				  </view> -->
			<!--  #endif -->
			<view class="cons_arrow" :style="{ left: arrLeft + 'px' }"></view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue"
	export default {
		components: {
			uniIcons,
		},

		props: {
			data: {
				type: Array,
				default: () => [],
			},
			tpyes: {
				type: String,
				default: () => 'select',
			},
			valueType: {
				type: Object,
				default: () => {
					return {
						label: "name",
						value: "name",
					}
				},
			},
			value: {
				type: [String, Number],
				default: "",
			},
			clearable: {
				type: Boolean,
				default: false,
			},
			filterable: {
				type: Boolean,
				default: false,
			},
			searchType: {
				type: Number,
				default: 1,
			},
			placeholder: {
				type: String,
				default: "请选择",
			},
			noDataText: {
				type: String,
				default: "暂无数据",
			},
			arrLeft: {
				type: Number,
				default: 20,
			},
			size: {
				type: Number,
				default: 650,
			},
			closeSelect: {
				type: Boolean,
				default: false,
			},
			refName: {
				type: String,
				default: "",
			},
			types: {
				type: String,
				default: "select",
			},
		},

		data() {
			return {
				show: false,
				readonly: true,
				isClick: false,
				totalArr: [],
				showData: [],
				selLabel: "",
			}
		},

		watch: {
			filterable: {
				immediate: true,
				deep: true,
				handler(news) {
					this.readonly = !news
				},
			},
			data: {
				immediate: true,
				deep: true,
				handler(news) {
					this.showData = news
					this.totalArr = news
				},
			},
			value: {
				immediate: true,
				deep: true,
				handler(news) {

					if (news) {
						if (this.types == 'edit') {
							console.log(this.data, 'this.data')
						}
						var index = this.data.findIndex(
							(ite) => {
								if (ite) {
									ite[this.valueType.value] == news

								} else {

								}
							}

						)
						if (this.types == 'edit') {
							if (index != -1) {
								this.$nextTick(() => {
									this.selLabel = this.data[index][this.valueType.label]
									console.log(this.selLabel, '123123333')
								})
								setTimeout(() => {


									this.$nextTick(() => {
										this.selLabel = this.data[index][this.valueType.label]
									})
								}, 0)
							} else {
								index = this.showData.findIndex(
									(ite) => {
										if (ite) {
											ite[this.valueType.value] == news

										}
									}

								)
								if (index == -1) {
									this.showData = [{}];
									this.showData[0][this.valueType.label] = news;
									console.log(this.showData, 'showData')
									setTimeout(() => {
										this.$nextTick(() => {
											this.selLabel = this.showData[0][this.valueType.label]
										})
									}, 0)
								} else {
									setTimeout(() => {


										this.$nextTick(() => {
											this.selLabel = this.showData[index][this.valueType.label]
										})
									}, 0)
								}

							}

						} else {
							index = this.data.findIndex(
								(ite) => ite[this.valueType.value] == news
							)

							if (index == -1) {

								uni.showToast({
									title: "传入的value不存在" + news,
									icon: "none",
									duration: 1500,
								})
							} else {
								this.$nextTick(() => {
									this.selLabel = this.data[index][this.valueType.label]
								})
							}
						}



					}


				},
			},
			closeSelect: {
				immediate: true,
				deep: true,
				handler(news) {
					this.show = news
				},
			},
		},

		created() {},
		beforeDestroy() {},

		methods: {
			toBlur() {
				// console.log(this.show, "show")
				// this.$nextTick(() => {
				//   this.show = false
				// })
				// this.$emit("update:closeSelect", false)

			},

			resetShow() {
				this.show = false
			},
			openSelect() {
				// if(!this.filterable){
				// 	this.show=!this.show
				// }
				if (this.data.length > 0) {
					this.show = !this.show

				} else {
					this.show = false
					console.log(2222, this.data, )


				}
				this.$emit("update:closeSelect", this.show)
				this.$nextTick(() => {
					this.$parent.clearF(this.refName)

				})
				this.isClick = !this.isClick
				console.log(this.isClick)
			},
			change(item) {
				if (this.value != item[this.valueType]) {
					this.$emit("input", item[this.valueType.value])
					this.$emit("change", item[this.valueType.value])
				}
				this.selLabel = item[this.valueType.label]
				console.log(this.selLabel, ' this.selLabel ')
				this.show = false
				this.$emit("update:closeSelect", this.show)
				this.isClick = false
				this.showData = this.data
			},
			toXl() {
				this.show = !this.show
				if (this.show == true) {
					this.$parent.clearF(this.refName)
				}
			},
			clearItem() {
				console.log(111)
				if (this.clearable) {
					this.$emit("input", "")
					this.$emit("change", "")
				}
				this.selLabel = ""
				this.showData = this.data
			},
			selectData(e) {
				let sel = e.detail.value
				// console.log(this.data, 'sel33')
				if (!sel) {
					this.showData = this.data
				} else {
					// console.log(this.data)
					let keys = Object.keys(this.data[0]);
					if (keys == 'description') {
						this.showData = this.data.filter(item => item.description.includes(sel));
						if (this.showData.length == 0) {
							// console.log(99999999)
							this.showData = []
							this.showData.push({
								description: sel
							})
						}
					} else {
						let arrCons = []
						let selVal = []
						this.data.forEach((item) => {
							arrCons.push(item)
						})
						if (arrCons.length > 0) {
							arrCons.forEach((item) => {
								if (this.searchType == 1) {
									if (item && item[this.valueType.label].indexOf(sel) != -1) {
										selVal.push(item)
									} else {
										if (this.types == 'edit') {
											var a = [{
												description: ""
											}];
											a[0].description = sel
											selVal = a
											this.showData = selVal
											this.$set(this, 'showData', selVal)
										}
									}
								} else {
									console.log(4444)
									if (item[this.valueType.label] == sel) {
										selVal.push(item)
									}
								}
							})
							this.show = true
							this.$emit("update:closeSelect", this.show)
							this.showData = selVal
						}

					}
				}
				// if (sel) {
				// 	let arrCons = []
				// 	let selVal = []
				// 	this.data.forEach((item) => {
				// 		arrCons.push(item)
				// 	})
				// 	if (arrCons.length > 0) {
				// 		arrCons.forEach((item) => {
				// 			if (this.searchType == 1) {
				// 				if (item && item[this.valueType.label].indexOf(sel) != -1) {
				// 					selVal.push(item)
				// 				} else {
				// 					if (this.types == 'edit') {
				// 						var a = [{
				// 							description: ""
				// 						}];
				// 						a[0].description = sel
				// 						selVal = a
				// 						this.showData = selVal
				// 						this.$set(this, 'showData', selVal)
				// 					}
				// 				}
				// 			} else {
				// 				console.log(4444)
				// 				if (item[this.valueType.label] == sel) {
				// 					selVal.push(item)
				// 				}
				// 			}
				// 		})
				// 		this.show = true
				// 		this.$emit("update:closeSelect", this.show)
				// 		this.showData = selVal
				// 	}
				// } else {
				// 	this.showData = this.data
				// }
			},
		}
	};
</script>

<style lang="less" scoped>
	.select_wrap {
		width: 650rpx;
		display: inline-block;
		position: relative;

		.select_input {
			-webkit-appearance: none;
			background-color: #fff;
			background-image: none;
			border-radius: 6rpx;
			border: 1px solid #707070;
			box-sizing: border-box;
			color: #606266;
			display: inline-flex;
			font-size: inherit;
			height: 80rpx;
			line-height: 80rpx;
			outline: none;
			padding: 0 20rx;
			box-sizing: border-box;
			transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
			width: 100%;
			padding-right: 30px;

			.input_info {
				font-size: 18px;
				width: 80%;
				height: 100%;

				.text_tips {
					box-sizing: border-box;
					padding: 0rpx 20rpx;
					height: 100%;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #272727;

					text {
						font-size: 14px;
						color: #a0a9b0;
					}
				}
			}

			.mini_box {
				width: 20%;
			}

			.arrow {
				width: 20rpx;
				height: 20rpx;
				background-color: transparent;
				/* 模块背景为透明 */
				border-color: #707070;
				border-style: solid;
				border-width: 1px 1px 0 0;
				box-sizing: border-box;
				// transition: all s;
				box-sizing: border-box;
				/*箭头方向可以自由切换角度*/
			}

			.icon_arrow {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				text-align: center;
				color: #c0c4cc;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 99;

				.arrow_down {
					width: 28rpx;
					height: 28rpx;
					transform: rotate(-45deg);
					margin-top: 5px;
					padding: 10rpx;
				}

				.arrow_up {
					width: 28rpx;
					height: 28rpx;
					transform: rotate(135deg);
					margin-top: -5px;
					padding: 10rpx;
				}

				.arrow-clear {
					width: 30rpx;
					height: 30rpx;
					// border: 1px solid #e4e7ed;
					color: #e4e7ed;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 12px;
				}
			}
		}

		.select_input_select {
			border-color: #409eff;
		}
	}

	.select_modal_con {
		width: 100%;
		transform-origin: center top;
		z-index: 200;
		position: absolute;
		top: 72rpx;
		left: 0;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		margin-top: 12px;

		.cons_arrow {
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
			top: -6px;
			left: 10%;
			margin-right: 3px;
			border-top-width: 0;
			border-bottom-color: #ebeef5;
		}

		.cons_arrow:after {
			content: " ";
			border-width: 6px;
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
			top: 1px;
			margin-left: -6px;
			border-top-width: 0;
			border-bottom-color: #fff;
		}
	}

	.select_modal {
		overflow: scroll;
		height: 160px;

		.select_content {
			list-style: none;
			padding: 6px 0;
			margin: 0;
			box-sizing: border-box;

			.select_content_li {
				font-size: 26rpx;
				padding: 10rpx 20px;
				position: relative;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #606266;
				height: 70rpx;
				line-height: 50rpx;
				box-sizing: border-box;
				cursor: pointer;

				&.selected {
					color: #409eff;
					font-weight: 700;
					background-color: #f5f7fa;
				}
			}

			.select_content_li:hover {
				background-color: #f5f7fa;
			}
		}
	}

	.select_modal_scroll {
		overflow: hidden;
		height: 300rpx;
	}

	// .select_content {
	// 	background-color: #fff;

	// 	.select_content_li {
	// 		padding: 12rpx;

	// 	}
	// }
</style>